<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  {{ message }}
	</div>

	<div id="example">
	  <p>Original message: "{{ message }}"</p>
	  <p>Computed reversed message: "{{ reversedMessage }}"</p>
	  <p>Date: "{{ now }}"</p>
	</div>

	<div id="app-2">
	  <span v-bind:title="message">
	    Hover your mouse over me for a few seconds to see my dynamically bound title!
	  </span>
	</div>

	<div id="app-3">
	  <p v-if="seen">Now you see me</p>
	</div>
	
	<div id="app-4">
	  <ol>
	    <li v-for="todo in todos">
	      {{ todo.text }}
	    </li>
	  </ol>
	</div>

	<div id="app-5">
	  <p>{{ message }}</p>
	  <button v-on:click="reverseMessage">Reverse Message</button>
	</div>

	<div id="app-7">
	  <ol>
	    <!-- Now we provide each todo-item with the todo object    -->
	    <!-- it's representing, so that its content can be dynamic -->
	    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
	  </ol>
	</div>
	<script type="text/javascript">
		Vue.component('todo-item', {
		  props: ['todo'],
		  template: '<li>{{ todo.text }}</li>'
		})

		var vm = new Vue({
		  el: '#example',
		  data: {
		    message: 'Hello'
		  },
		  computed: {
		    // a computed getter
		    reversedMessage: function () {
		      // `this` points to the vm instance
		      return this.message.split('').reverse().join('')
		    },
		    now: function () {
			  return Date.now()
			}
		  }
		})

		var app7 = new Vue({
		  el: '#app-7',
		  data: {
		    groceryList: [
		      { text: 'Vegetables' },
		      { text: 'Cheese' },
		      { text: 'Whatever else humans are supposed to eat' }
		    ]
		  }
		})

		var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue!'
		  }
		});
		var app2 = new Vue({
		  el: '#app-2',
		  data: {
		    message: 'You loaded this page on ' + new Date()
		  }
		})
		var app3 = new Vue({
		  el: '#app-3',
		  data: {
		    seen: true
		  }
		})
		var app4 = new Vue({
		  el: '#app-4',
		  data: {
		    todos: [
		      { text: 'Learn JavaScript' },
		      { text: 'Learn Vue' },
		      { text: 'Build something awesome' }
		    ]
		  }
		})

		var app5 = new Vue({
		  el: '#app-5',
		  data: {
		    message: 'Hello Vue.js!'
		  },
		  methods: {
		    reverseMessage: function () {
		      this.message = this.message.split('').reverse().join('')
		    }
		  },
		  watch:{
		  	message: function (val, oldVal) {
		  		console.log('new: %s, old: %s', val, oldVal);
		  	}
		  }
		})
	</script>
</body>
</html>